<template>
  <div class="pageAnnouncementMain">
    <PageHeader :lang="lang"></PageHeader>
    <!--资产总览-->
    <div  style="overflow:hidden; position: relative" id="pageBody">

      <div class="announcement_title">
          {{lang['footAnnouncement']}}
      </div>

      <div class="noNews" v-show="total === 0">
        <img src="../../assets/images/noNews.png">
        {{lang['announcement']}}
      </div>

      <div class="announcement_list">
        <ul>
          <li v-for="item in newslist">
            <a @click='announcementid_details(item.Keywords)'>
              <span>{{item.Title}}</span>
              <em>{{item.CreateTime}}</em>
            </a>
          </li>
        </ul>
      </div>

      <!-- 翻页代码 -->
      <SwPaging
      :total="total"
      :pageSize="pageSize"
      :pageRange="pageRange"
      :lang="lang"
      @jumpPage="jumpPage"></SwPaging>

    </div>
    <!--新闻中心-->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import SwPaging from '@/components/SwPaging/index.vue'

export default {
  mixins: [commonMixins],
  data () {
    return {
      newslist: '',
      pageIndex: 1, // 当前页
      pageSize: 20, // 每页多少条
      pageRange: 7, // 页码条范围，例如8就是显示1-7的页码条
      total: 0
    }
  },
  components: {
    SwPaging
  },
  watch: {
    langKey () {
      this.getArticleList()
    }
  },
  methods: {
    announcementid_details (keywords) {
      this.$router.push({
        path: '/news/announcement_details',
        query: {
          keywords: keywords
        }
      })
    },
    getArticleList (no) {
      this.$http.post('Article/GetArticleList', {
        pageIndex: no || this.pageIndex,
        pageSize: this.pageSize,
        articleType: 2
      }, {
        ignorableCodes: '42017'
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.newslist = res.Data || []

          this.total = res.TotalItem
        }
      })
    },
    jumpPage (no) {
      this.getArticleList(no)
    }
  },
  mounted () {
    this.getArticleList()
  }
}
</script>

<style lang="less">

.pageAnnouncementMain {
  background: #14141c;

  .announcement_title {
    width: 1200px;
    margin: 30px auto 10px;
    line-height: 45px;
    font-size: 18px;
    text-indent: 20px;
    background: #1e232d;
    color: #fff;
  }

  .announcement_list {
    width: 1200px;
    margin: 0 auto;
    ul{
      padding-bottom: 90px;
    }
    li {
      padding: 0 20px;
      height: 42px;
      line-height: 42px;
      border-top: 1px solid #2A3440;
      background: #1e232d;

      a {
        display: block;
        font-size: 12px;

        span{
          float: left;
          width: 80%;
          display: -webkit-box;
          -webkit-line-clamp:1;
          -webkit-box-orient: vertical;
          word-break: break-all;
          overflow: hidden;
          color:#fff;
        }
        em{
          float: right;
          color:#fff;
        }
      }
    }
  }
  .SwPaging {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

  }
}

.noNews{
  position: absolute;
  top: 50%;
  left: 50%;
  transform:  translate(-50%,-50%);
  color: #fff;
  text-align: center;
  img {
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width:1200px){
  .pageAnnouncementMain {
    .announcement_title {width: auto; margin: 20px 16px 10px; }
    .announcement_list {width: auto; margin: 20px 16px; }
  }
}
</style>
